<template>
  <div class="travel-standard-page">
    <div class="content-area">
      <van-tabs v-model:active="activeTab" sticky>
        <van-tab title="交通标准">
          <van-cell-group inset>
            <van-cell title="火车" value="二等座/硬卧" />
            <van-cell title="飞机" value="经济舱" />
            <van-cell title="长途汽车" value="普通座" />
            <van-cell title="市内交通" value="公共交通为主" />
          </van-cell-group>
        </van-tab>
        <van-tab title="住宿标准">
          <van-cell-group inset>
            <van-cell title="一线城市" value="≤400元/晚" />
            <van-cell title="二线城市" value="≤350元/晚" />
            <van-cell title="三线城市" value="≤300元/晚" />
            <van-cell title="其他城市" value="≤250元/晚" />
          </van-cell-group>
        </van-tab>
        <van-tab title="餐饮标准">
          <van-cell-group inset>
            <van-cell title="一线城市" value="≤100元/天" />
            <van-cell title="二线城市" value="≤80元/天" />
            <van-cell title="三线城市" value="≤60元/天" />
            <van-cell title="其他城市" value="≤50元/天" />
          </van-cell-group>
        </van-tab>
      </van-tabs>

      <div class="city-list">
        <van-cell-group inset title="城市级别参考">
          <van-cell title="一线城市" label="北京、上海、广州、深圳" />
          <van-cell title="二线城市" label="成都、杭州、武汉、南京、西安、天津、重庆、苏州、郑州、长沙等" />
          <van-cell title="三线城市" label="大部分省会城市及经济发达的地级市" />
        </van-cell-group>
      </div>

      <div class="notes">
        <van-cell-group inset title="报销说明">
          <van-cell title="凭证要求" label="所有费用需提供合法有效发票" />
          <van-cell title="超标处理" label="超出标准部分需个人承担" />
          <van-cell title="特殊情况" label="特殊情况需提前申请批准" />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar, Tab, Tabs, Cell, CellGroup } from 'vant'

export default {
  name: 'FinanceTravelStandard',
  components: {
    vanNavBar: NavBar,
    vanTab: Tab,
    vanTabs: Tabs,
    vanCell: Cell,
    vanCellGroup: CellGroup
  },
  setup() {
    const router = useRouter()
    const activeTab = ref(0)
    
    const goBack = () => router.back()
    
    return {
      activeTab,
      goBack
    }
  }
}
</script>

<style scoped>
.travel-standard-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}
.content-area {
  padding-bottom: 20px;
}
.city-list, .notes {
  margin-top: 20px;
}
</style> 